<template>
  <div id="step">
    <div class="step-box">
      <div class="step-bg rel auto">
        <div class="step-now abs" :style="{ width:stepNowWidth}"></div>
        <ul class="fix rel" :style="{marginLeft:ulMarginLeft}">
          <li class="abs" v-for="(step, index) in stepData" :style="{ width: liWidth,left:liLeft(index)}" @click="stepRouter(index,step.name)">
            <span class="abs db" v-if="index<=stepNum"></span>
            <p class="rel">{{step.name}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    stepData: Array,
    stepNum: Number
  },
  data() {
    return {

    }
  },
  computed: {
    stepNowWidth: function() {
      if (this.stepNum >= (this.stepData.length - 1)) {
        return 100 + '%'
      } else {
        return (this.stepNum * 2 + 1) / ((this.stepData.length - 1) * 2) * 100 + '%'
      }
    },
    ulMarginLeft: function() {
      return -(1000 / (this.stepData.length - 1)) / 2 + 'px'
    },
    liWidth: function() {
      return 1000 / (this.stepData.length - 1) + 'px'
    }
  },
  methods: {
    liLeft: function(index) {
      return (1000 / (this.stepData.length - 1)) * index + 'px'
    },
    stepRouter(i, name) {
      this.$emit('stepRouter', i, name)
    }
  }
}

</script>
<style type="text/css" scoped>
.step-box {
  height: 80px;
}

.step-bg {
  width: 1000px;
  height: 8px;
  background-color: #d8e7ff;
  margin-top: 70px;
}

.step-now {
  height: 8px;
  background-color: #01378c;
  z-index: 2;
}

.step-bg ul {
  width: 1000px;
  top: -10px;
  height: 50px;
}

.step-bg li {
  top: 0px;
  text-align: center;
  cursor: pointer;
}

.step-bg li p {
  padding-top: 47px;
}

.step-bg li p::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #d8e7ff;
  border-radius: 100%;
  top: 0;
  left: 50%;
  margin-left: -10px;
}

.step-bg li span {
  left: 50%;
  margin-left: -20px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background-color: #01378c;
  border-radius: 100%;
  top: 5px;
  left: 50%;
  margin-left: -5px;
}

</style>
